<template>
	<cl-page>
		<view class="profile-page">
			<!-- 头部信息 -->
			<view class="header-section">
				<text class="nickname">{{ displayInfo.nickname }}</text>
				<text class="user-id">ID: {{ displayInfo.id }}</text>
			</view>

			<!-- 基本信息 -->
			<view class="info-section">
				<text class="section-title">基本信息</text>
				<view class="info-list">
					<view class="info-item">
						<text class="label">昵称</text>
						<view class="value-container">
							<text class="value">{{ displayInfo.nickname }}</text>
						</view>
					</view>
					<view class="info-item">
						<text class="label">真实姓名</text>
						<view class="value-container">
							<text class="value">{{ displayInfo.realName }}</text>
						</view>
					</view>
					<view class="info-item">
						<text class="label">手机号</text>
						<view class="value-container">
							<text class="value">{{ formatPhone(displayInfo.phone) }}</text>
						</view>
					</view>
					<view class="info-item">
						<text class="label">性别</text>
						<view class="value-container">
							<text class="value">{{ getGenderText(displayInfo.gender) }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 企业信息 -->
			<view class="info-section">
				<text class="section-title">企业信息</text>
				<view class="info-list">
					<view class="info-item">
						<text class="label">客户类型</text>
						<view class="value-container">
							<text class="value">{{ displayInfo.clientType }}</text>
						</view>
					</view>
					<view class="info-item">
						<text class="label">区域</text>
						<view class="value-container">
							<text class="value">{{ displayInfo.areaName }}</text>
						</view>
					</view>
					<view class="info-item">
						<text class="label">地址</text>
						<view class="value-container">
							<text class="value address-text">{{ displayInfo.address }}</text>
						</view>
					</view>
					<view class="info-item">
						<text class="label">会员等级</text>
						<view class="value-container">
							<text class="value">{{ displayInfo.levelId }}</text>
						</view>
					</view>
					<view class="info-item">
						<text class="label">折扣率</text>
						<view class="value-container">
							<text class="value discount-text"
								>{{ (parseFloat(displayInfo.discount) * 100).toFixed(2) }}%</text
							>
						</view>
					</view>
					<view class="info-item">
						<text class="label">可购买处方药</text>
						<view class="value-container">
							<text class="value">{{ displayInfo.isPres }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-section">
				<cl-button type="default" size="large" @tap="changePassword"> 修改密码 </cl-button>
			</view>
			<view class="action-section">
				<cl-button type="danger" size="large" plain @tap="logout"> 退出登录 </cl-button>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useCool } from "/@/cool";
import { useStore } from "/@/cool/store";

const { service, router } = useCool();
const { user: userStore } = useStore();

// 用户信息 - 从store获取
const userInfo = computed(() => userStore.info || {});

// 计算显示的信息
const displayInfo = computed(() => ({
	id: userInfo.value.id || "",
	nickname: userInfo.value.nickName || userInfo.value.username || "未设置昵称",
	avatar: userInfo.value.avatarUrl || "/static/empty/no.jpg",
	gender: userInfo.value.gender || 0,
	phone: userInfo.value.phone || userInfo.value.telephone || "未绑定",
	realName: userInfo.value.realName || "未设置",
	address: userInfo.value.address || "未设置",
	areaName: userInfo.value.areaName || "未设置",
	clientType: userInfo.value.clientType || "未设置",
	discount: userInfo.value.discount || "1.0000",
	levelId: userInfo.value.levelId || "未设置",
	isPres: userInfo.value.isPres === "Y" ? "是" : "否",
}));

// 获取性别文本
function getGenderText(gender: number) {
	const map: Record<number, string> = {
		0: "未设置",
		1: "男",
		2: "女",
	};
	return map[gender] || "未设置";
}

// 格式化手机号
function formatPhone(phone: string) {
	if (!phone) return "未绑定";
	return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
}

// 修改密码
function changePassword() {
	router.push("/pages/user/change-password");
}

// 退出登录
function logout() {
	uni.showModal({
		title: "提示",
		content: "确定要退出登录吗？",
		success: (res) => {
			if (res.confirm) {
				userStore.logout();
				uni.showToast({ title: "已退出登录", icon: "success" });
				setTimeout(() => {
					router.push("/pages/user/login");
				}, 1000);
			}
		},
	});
}

onReady(() => {
	// 初始化用户信息
});
</script>

<style lang="scss" scoped>
.profile-page {
	background-color: #f8f9fa;
	min-height: 100vh;
	padding-bottom: 40rpx;
}

.header-section {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 60rpx 32rpx 40rpx;
	text-align: center;
	color: #ffffff;
}

.avatar-container {
	position: relative;
	display: inline-block;
	margin-bottom: 24rpx;
}

.camera-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: #667eea;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4rpx solid #ffffff;
}

.nickname {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.user-id {
	font-size: 24rpx;
	opacity: 0.8;
}

.info-section,
.tags-section {
	margin: 32rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 16rpx;
	display: block;
}

.info-list {
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
}

.info-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 24rpx;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;

	&:last-child {
		border-bottom: none;
	}

	&:active {
		background-color: #f8f9ff;
	}
}

.label {
	font-size: 28rpx;
	color: #1a1a1a;
}

.value-container {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.value {
	font-size: 28rpx;
	color: #666;
}

.tags-container {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 24rpx;
}

.tag-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 16rpx;
	background-color: #f8f9ff;
	border: 1rpx solid #e8e8ff;
	border-radius: 40rpx;
	transition: all 0.3s ease;

	&:active {
		background-color: #f0f0ff;
	}
}

.tag-text {
	font-size: 24rpx;
	color: #667eea;
}

.add-tag-btn {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 16rpx;
	background-color: #f8f9ff;
	border: 2rpx dashed #e8e8ff;
	border-radius: 40rpx;
	transition: all 0.3s ease;

	&:active {
		background-color: #f0f0ff;
	}
}

.add-text {
	font-size: 24rpx;
	color: #667eea;
}

.action-section {
	margin: 32rpx;
	display: flex;
	flex-direction: column;
	gap: 24rpx;

	.cl-button {
		height: 88rpx;
		font-size: 30rpx;
	}
}

.address-text {
	flex: 1;
	line-height: 1.4;
	text-align: right;
	max-width: 400rpx;
}

.discount-text {
	color: #ff4757;
	font-weight: 600;
}
</style>
